<template>

  <!-- 商品信息 -->
  <el-row>
    <el-col :span="24" style="box-sizing: border-box; padding: 10px 10px;">
      <el-card style="height: 850px">

        <div class="showGoodsBox">
          <div class="card">
            <img :src="goodsInfo.goodsImg" style="width: 100%; height: 600px">
          </div>

          <div class="showGoodsInfo">
            <p class="goodsname">{{ goodsInfo.goodsname }}</p>
            <p class="goodsInfo">{{ goodsInfo.goodsInfo }}</p>
            <p class="goodsInfo" style="font-family: Fantasy; "> 商品类型 ： {{ goodsInfo.goodstype }}</p>
            <p class="goodsprice" style="margin: 20px 0; color: red">{{ goodsInfo.goodsprice }} ￥ </p>
            <div>
              <el-input-number v-model="num" :min="1" label="描述文字" style="margin: 20px 0"></el-input-number>
              <span style="font-weight: bolder; font-size: 20px; margin-left: 10px">
                件
              </span>

            </div>
            <p class="goodsprice" style="margin: 20px 0;font-size: 30px">总价格 ：{{ sumPrice }} ￥ </p>

            <ul style="margin: 40px 0">
              <li>
                <button class="btn">立即购买</button>
              </li>
              <li>
                <button class="btn" @click="addShoppingCart">加入购物车</button>
              </li>
            </ul>
          </div>
        </div>

      </el-card>
    </el-col>

    <!-- 商品评价信息 -->
    <el-col :span="24" style="box-sizing: border-box; padding: 0px 10px;">
      <el-card>
        <h1>评价：</h1>
      </el-card>
    </el-col>

  </el-row>
</template>

<script>

import Request from "@/Network/axios";
import {Message} from "element-ui";

export default {
  name: "buyGoods",

  data() {
    return {
      num: 1
    }
  },

  computed: {
    goodsInfo() {
      return JSON.parse(this.$route.query.data)
    },

    sumPrice() {
      const sumPrice = this.num * this.goodsInfo.goodsprice
      return sumPrice.toFixed(2)
    }

  },


  methods: {

    // 将商品加入购物车
    addShoppingCart(){
      Request({
        url: '/user/addShoppingCart',
        method: 'post',
        data: {
          goodsId: this.goodsInfo.id,
          goodsNum: this.num,
          username: localStorage.getItem('username')
        }
      }).then(res => {
        let Type
        res.data.status >= 400 ? Type = 'warning' : Type = 'success'
        Message({
          type: Type,
          message: res.data.message
        })
      }).catch(err => {
        console.warn(err)
      })
    }

  }

}
</script>

<style scoped>
.header {
  margin: 20px;
}

.showGoodsBox {
  display: flex;
  margin-top: 100px;
}

.card {
  margin-left: 300px;
  margin-right: 200px;
  width: 400px;
  height: 600px;
  overflow: hidden;
  border-radius: 30px;
  background: #212121;
  box-shadow: 15px 15px 30px rgb(25, 25, 25),
  -15px -15px 30px rgb(60, 60, 60);
}

.showGoodsInfo {
  width: 600px;
}

.goodsname {
  font-weight: 800;
  text-transform: uppercase;
  color: #494454;
  margin-top: 10px;
  font-size: 25px;
  letter-spacing: 1px;
}

.goodsInfo {
  color: #D4D0DC;
  margin-top: 10px;
  font-size: 14px;
  margin: 20px 0;
}

.goodsprice {
  color: #FFC9D8;
  font-weight: 800;
  font-size: 50px;
  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.42);
}

ul {
  list-style-type: none;
}

li {
  float: left;
  margin: 10px 60px 0 10px;
}


.btn {
  padding: 1.1em 2em;
  background: none;
  border: 2px solid #fff;
  font-size: 15px;
  color: #131313;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.3s;
  border-radius: 12px;
  background-color: #ecd448;
  font-weight: bolder;
  box-shadow: 0 2px 0 2px #000;
}

.btn:before {
  content: "";
  position: absolute;
  width: 100px;
  height: 120%;
  background-color: #ff6700;
  top: 50%;
  transform: skewX(30deg) translate(-150%, -50%);
  transition: all 0.5s;
}

.btn:hover {
  background-color: #4cc9f0;
  color: #fff;
  box-shadow: 0 2px 0 2px #0d3b66;
}

.btn:hover::before {
  transform: skewX(30deg) translate(150%, -50%);
  transition-delay: 0.1s;
}

.btn:active {
  transform: scale(0.9);
}

</style>